<template>
  <div class="articles">
  
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <article-cell :artlist="artlist"></article-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articles } from '@/api/articles'

import  articleCell  from '@/componets/articleCell'
export default {
  components: {
    articleCell,
  },
  props: {
    //  获取传过来的id   没传就去默认值  为推荐的id为0
    channel: {
      type: Object,
      default: () => {
        return {
          id: 0,
          name: '推荐',
        }
      },
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      artlist: [],
      times_tamp: null,
    }
  },
  methods: {
    onLoad() {
      this.getArticles()
    },

    // 上拉刷新
    async onRefresh() {
      const { data: res } = await articles({
        channel_id: this.channel.id, //  推荐
        timestamp: this.times_tamp || Date.now(),
        with_top: 1,
      })

      this.artlist = res.data.results

      this.refreshing = false ///  不设置就会持续显示下拉加载效果
    },

    // 获取频道新闻推荐  // 上拉要一直返回以前的数据， 就要利用他的返回值里面的 时间戳来发送新的请求

    async getArticles() {
      const { data: res } = await articles({
        channel_id: this.channel.id, //  推荐
        timestamp: this.times_tamp || Date.now(),
        with_top: 1,
      })

      console.log(res, 66666)

      //  一定需要叠加 不然始终都会触底  就导致onLoad一直触发
      this.artlist = [...this.artlist, ...res.data.results]

      console.log(this.artlist, 888)

      //  获取数据成功后就结束加载状态效果
      this.loading = false

      //  判断是否关闭上拉组件   finished=====没有数据了就设置finished=true  上拉组件就不会再触发了
      if (res.data.results.length) {
        this.times_tamp = res.data.pre_timestamp
      } else {
        this.finished = true //关闭上拉加载组件
      }
    },
  },

  created() {
    // this.getArticles()
  },
}
</script>

<style scoped lang='less'>
.title {
  font-size: 30px;
  color: #3a3a3a;
}
.aut_name,
.comm_count,
.pubdate {
  font-size: 0.29333rem;
  color: #b4b4b4;
  margin-right: 0.33333rem;
}
</style>